<template>
  <div>
    <el-steps :active="step" simple finish-status="success">
      <el-step title="选择供应商"></el-step>
      <el-step title="编辑供应商信息"></el-step>
      <el-step title="提交审批"></el-step>
    </el-steps>
    <basic-container v-show="step === 0">
      <avue-form v-loading="loading" ref="form" :option="option" v-model="form">
        <template slot="supplierName">
          <el-input class="pointer" v-model="form.supplierName" @focus="openSupplier" placeholder="请选择" readonly>
            <i slot="suffix" class="el-icon-search"></i>
          </el-input>
        </template>
        <template slot="attachment">
          <easy-upload
            style="display: inline"
            :drag="false"
            v-model="form.attachment"
            :disabled="['view'].includes(type)"
            :view-with-count="['view'].includes(type)"
          />
        </template>
      </avue-form>
    </basic-container>
    <change-info ref="changeInfo" v-if="step === 1" :changeId="form.id" @callback="handleClose" @prev="handlePrev" />
  </div>
</template>

<script>
import { option, supplierOption } from '@/option/tenant/supplier/change-form'
import ChangeInfo from '@/views/tenant/supplier/change/info'
import { save, submit } from '@/api/supplier/change'

export default {
  name: 'SupplierChangeForm',
  props: ['type', 'param'],
  components: { ChangeInfo },
  data() {
    return {
      form: {
        attachments: []
      },
      loading: false,
      option: option.call(this),
      step: 0
    }
  },
  mounted() {
    if (this.type === 'view') return
    this.form = this.param
    if (!this.form || this.form.status === '0') {
      this.step = 0
      this.$emit('update:buttons', [
        {
          text: '保存并下一步',
          callback: this.handleNext
        },
        {
          text: '取消',
          type: 'default',
          callback: () => {
            this.$emit('update:visible', false)
          }
        }
      ])
    } else if (this.form.status === '1') {
      this.step = 1
      this.$emit('update:buttons', [
        {
          text: '保存',
          callback: this.saveSupplierInfo
        },
        {
          text: '保存并下一步',
          callback: this.submitSupplierInfo
        },
        {
          text: '取消',
          type: 'default',
          callback: () => {
            this.$emit('update:visible', false)
          }
        }
      ])
    }
  },
  methods: {
    openSupplier() {
      this.$quickModal({
        title: '选择供应商',
        width: '900px',
        componentIsTag: true,
        component: 'suppliers',
        props: {
          multiple: false,
          columns: supplierOption
        },
        on: {
          change: row => {
            this.form.supplierName = row.supplierName
            this.form.supplierId = row.id
            this.form.supplierCode = row.supplierCode
          }
        }
      })
    },
    handleSave() {
      this.$refs.form.validate((vaild, done) => {
        if (vaild) {
          save({ ...this.form, isSubmit: false }).then(res => {
            const data = res.data.data
          })
        }
      })
    },
    handleNext() {
      this.$refs.form.validate((vaild, done) => {
        if (vaild) {
          submit({ ...this.form, isSubmit: true }).then(res => {
            const data = res.data.data
            this.step = 1
            this.$emit('update:buttons', [
              {
                text: '保存',
                callback: this.saveSupplierInfo
              },
              {
                text: '保存并下一步',
                callback: this.submitSupplierInfo
              },
              {
                text: '取消',
                type: 'default',
                callback: () => {
                  this.$emit('update:visible', false)
                }
              }
            ])
          })
        }
      })
    },
    submitSupplierInfo() {
      this.$refs.changeInfo.handleNext()
    },
    handleClose(val) {
      this.$emit('update:visible', val)
    },
    handlePrev() {
      this.$refs.form.resetForm()
      this.step = 0
    }
  }
}
</script>

<style></style>
